<template>
  <div id="app" class="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300">
    <!-- 全局头部导航 -->
    <HeaderView @show-how-to-play="showHowToPlay = true" />
    
    <!-- 路由视图出口 -->
    <router-view class="pt-16" />
    
    <!-- 玩法介绍弹窗（全局复用） -->
    <HowToPlay 
      v-if="showHowToPlay" 
      @close="showHowToPlay = false" 
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import HeaderView from './components/HeaderView.vue'
import HowToPlay from './components/HowToPlay.vue'

// 控制玩法介绍弹窗显示状态
const showHowToPlay = ref(false)
</script>

<style>

</style>